<template>
	<view class="price-adjustment">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="content">
			<u-form class="form" labelPosition="left" :model="formData" :rules="rules" ref="formRef">
				<view class="form-item">
					<view class="base-price" v-for="(item,index) in device_list" :key="index">
						{{item.grids_num}}#基础价：{{item.rent}}
					</view>
				</view>
				<!-- <u-form-item class="form-item" label="基础价" labelWidth="80" prop="allocation_ratio">
					<u-input placeholder="请输入基础价" disabled border="surround"
						v-model="formData.allocation_ratio"></u-input>
				</u-form-item> -->
				<u-form-item class="form-item" label="自己分配比例" labelWidth="80" prop="allocation_ratio">
					<u-input type="number" placeholder="请输入分配比例" border="surround"
						v-model="formData.allocation_ratio"></u-input>
				</u-form-item>
				<u-form-item class="form-item" label="代理1" labelWidth="80" prop="agent_id1">
					<cus-selects class="agent-name" :closeSelect.sync="false" :data="agentList"
						:value="formData.agent_id1" placeholder="请输入关键字搜索" @change="changeAgent($event, 1)"
						:clearable="true" :filterable="true" :searchType='1'></cus-selects>
				</u-form-item>
				<u-form-item class="form-item" label="分配比例" labelWidth="80" prop="allocation_ratio1">
					<u-input type="number" placeholder="请输入分配比例" border="surround"
						v-model="formData.allocation_ratio1"></u-input>
				</u-form-item>
				<u-form-item class="form-item" label="代理2" labelWidth="80" prop="agent_id2">
					<cus-selects class="agent-name" :closeSelect.sync="false" :data="agentList"
						:value="formData.agent_id2" placeholder="请输入关键字搜索" @change="changeAgent($event, 2)"
						:clearable="true" :filterable="true" :searchType='1'></cus-selects>
				</u-form-item>
				<u-form-item class="form-item" label="分配比例" labelWidth="80" prop="allocation_ratio2">
					<u-input type="number" placeholder="请输入分配比例" border="surround"
						v-model="formData.allocation_ratio2"></u-input>
				</u-form-item>
				<u-form-item class="form-item" label="代理3" labelWidth="80" prop="agent_id3">
					<cus-selects class="agent-name" :closeSelect.sync="false" :data="agentList"
						:value="formData.agent_id3" placeholder="请输入关键字搜索" @change="changeAgent($event, 3)"
						:clearable="true" :filterable="true" :searchType='1'></cus-selects>
				</u-form-item>
				<u-form-item class="form-item" label="分配比例" labelWidth="80" prop="allocation_ratio3">
					<u-input type="number" placeholder="请输入分配比例" border="surround"
						v-model="formData.allocation_ratio3"></u-input>
				</u-form-item>

				<view v-for="(item,index) in device_list" :key="index">
					<u-form-item class="form-item" :label="item.grids_num+'#加价'" labelWidth="80"
						v-if="item.grids_num==3">
						<u-input :placeholder="'请输入'+item.grids_num+'#加价'" border="surround"
							v-model="formData.additional_amount3" @blur="changePeice(index, item.grids_num)"></u-input>
						<u-input placeholder="合计" disabled border="surround" v-model="formData.total_price3"></u-input>
					</u-form-item>
					<u-form-item class="form-item" :label="item.grids_num+'#加价'" labelWidth="80"
						v-else-if="item.grids_num==6">
						<u-input :placeholder="'请输入'+item.grids_num+'#加价'" border="surround"
							v-model="formData.additional_amount6" @blur="changePeice(index, item.grids_num)"></u-input>
						<u-input placeholder="合计" disabled border="surround" v-model="formData.total_price6"></u-input>
					</u-form-item>
					<u-form-item class="form-item" :label="item.grids_num+'#加价'" labelWidth="80"
						v-else-if="item.grids_num==9">
						<u-input :placeholder="'请输入'+item.grids_num+'#加价'" border="surround"
							v-model="formData.additional_amount9" @blur="changePeice(index, item.grids_num)"></u-input>
						<u-input placeholder="合计" disabled border="surround" v-model="formData.total_price9"></u-input>
					</u-form-item>
					<u-form-item class="form-item" :label="item.grids_num+'#加价'" labelWidth="80"
						v-else-if="item.grids_num==12">
						<u-input :placeholder="'请输入'+item.grids_num+'#加价'" border="surround"
							v-model="formData.additional_amount12" @blur="changePeice(index, item.grids_num)"></u-input>
						<u-input placeholder="合计" disabled border="surround" v-model="formData.total_price12"></u-input>
					</u-form-item>
					<u-form-item class="form-item" label="加价" labelWidth="80" v-else>
						<u-input placeholder="'请输入加价金额" border="surround" v-model="formData.additional_amount"
							@blur="changePeice(index, 0)"></u-input>
						<u-input placeholder="合计" disabled border="surround" v-model="formData.total_price"></u-input>
					</u-form-item>
				</view>

				<view class="form-item">
					<text class="tips">注意：自己分配比例+代理1分配比例+代理2分配比例+代理3分配比例=100%。如果不分配给代理，代理的分配比例填0。</text>
				</view>
			</u-form>

			<view class="footer">
				<view class="btn-group">
					<u-button class="btn" type="primary" size="normal" @click="confirm()">确认改价</u-button>
					<u-button class="btn" type="info" size="normal" @click="cancel()">取消改价</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';
	import cusSelects from '@/components/cus-selects-fan/cus-selects-fan.vue';

	const state = reactive({
		title: '设备改价',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		device_list: [],
		formData: {
			device_ids: [],
			base_price: '',
			additional_amount: '',
			additional_amount3: '',
			additional_amount6: '',
			additional_amount9: '',
			additional_amount12: '',
			allocation_ratio: '',
			agent_id1: '',
			allocation_ratio1: '',
			agent_id2: '',
			allocation_ratio2: '',
			agent_id3: '',
			allocation_ratio3: '',
			total_price: '',
			total_price3: '',
			total_price6: '',
			total_price9: '',
			total_price12: '',
		}
	});

	const rules = ref([]);
	const formRef = ref(null);
	const agentList = ref([]);

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad-1');
		uni.$on('selDeviceIds', function(data) {
			console.log('selDeviceIds', data);
			/* setTimeout(function() {
				getDeviceInfo();
			}, 800); */
		})
		if (opt.hasOwnProperty('selDeviceIds')) {
			state.formData.device_ids = JSON.parse(opt.selDeviceIds);
			getDeviceInfo();
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow-1');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady-1');
	})

	function initData() {
		getAgentList();
	}

	function getAgentList() {
		request.get('agent.agent/getAgentList').then(res => {
			console.log('代理列表', res);
			let data = res.data;
			data.forEach((item, index) => {
				if (item.agent_level >= 6) {
					agentList.value.push({
						text: 'ID:' + item.id + ',姓名:' + item.contact_name + ',手机:' + item
							.contact_phone,
						label: 'ID:' + item.id + ',姓名:' + item.contact_name + ',手机:' + item
							.contact_phone,
						value: item.id + ''
					});
				}
			})
		})
	}

	function getDeviceInfo() {
		console.log('getDeviceInfo', state.formData.device_ids);
		request.get('agent.equipment/getDeviceInfo', {
			device_ids: state.formData.device_ids,
		}).then(res => {
			console.log('选中设备信息', res);
			state.device_list = res.data
			if (state.device_list.length > 0) {
				state.formData.base_price = parseFloat(state.device_list[0].rent);
				state.formData.additional_amount = parseFloat(state.device_list[0].additional_amount);

				state.device_list.forEach((item, index) => {
					if (item.grids_num == 3) {
						state.formData.total_price3 = parseFloat(state.device_list[index].rent);
					} else if (item.grids_num == 6) {
						state.formData.total_price6 = parseFloat(state.device_list[index].rent);
					} else if (item.grids_num == 9) {
						state.formData.total_price9 = parseFloat(state.device_list[index].rent);
					} else if (item.grids_num == 12) {
						state.formData.total_price12 = parseFloat(state.device_list[index].rent);
					} else {
						state.formData.total_price = parseFloat(state.device_list[index].rent);
					}
				})
			}
		})
	}

	function changeAgent(e, type) {
		console.log('选择代理', e, type);
		if (type == 1) {
			state.formData.agent_id1 = e;
		} else if (type == 2) {
			state.formData.agent_id2 = e;
		} else if (type == 3) {
			state.formData.agent_id3 = e;
		}
	}

	function changePeice(index, num) {
		console.log('设置价格', index, num);
		if (num == 3) {
			state.formData.total_price3 = parseFloat(state.device_list[index].rent) + parseFloat(state.formData
				.additional_amount3);
		} else if (num == 6) {
			state.formData.total_price6 = parseFloat(state.device_list[index].rent) + parseFloat(state.formData
				.additional_amount6);
		} else if (num == 9) {
			state.formData.total_price9 = parseFloat(state.device_list[index].rent) + parseFloat(state.formData
				.additional_amount9);
		} else if (num == 12) {
			state.formData.total_price12 = parseFloat(state.device_list[index].rent) + parseFloat(state.formData
				.additional_amount12);
		} else {
			state.formData.total_price = parseFloat(state.device_list[index].rent) + parseFloat(state.formData
				.additional_amount);
		}
	}

	function confirm() {
		console.log('确认改价', parseFloat(state.formData.allocation_ratio3 ?? 0));
		let total = parseFloat(state.formData.allocation_ratio ?? 0) + parseFloat(state.formData.allocation_ratio1 ?? 0) +
			parseFloat(state.formData.allocation_ratio2 ?? 0) + parseFloat(state.formData.allocation_ratio3 ?? 0);
		console.log(total);
		if (total != 100) {
			util.showTip('分配比例之和必需为100%');
			return;
		}

		request.post('agent.equipment/changePrice', state.formData).then(res => {
			console.log('改价结果', res);
			util.showTip(res.msg);
			if (res.code == 1) {
				setTimeout(() => {
					pageRoute('/agentPages/equipment-manage/equipment-manage');
				}, 1000);
			}
		})
	}

	function cancel() {
		console.log('取消改价');
		uni.navigateBack({
			delta: 1
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		device_list,
		formData,
	} = toRefs(state);
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.price-adjustment {
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.content {
			margin: 24rpx;

			.form {
				.form-item {
					.agent-name {
						flex: 1;
					}

					.base-price {
						margin: 0 auto;
						// display: flex;
						// text-align: center;
					}

					.tips {
						color: red;
					}
				}
			}

			.footer {
				position: fixed;
				/* 固定在底部 */
				bottom: 0;
				width: 100%;

				.btn-group {
					display: flex;

					.btn {
						width: 160rpx;
					}
				}
			}
		}
	}
</style>